<template>
  <div>
    <EDesigner
      ref="designerRef"
      @save="handleSubmit"
      title="EDesigner数据回显示例"
      id="designer"
    >
      <template #header-prefix>
        <div>欢迎使用EDesigner设计器</div>
      </template>
    </EDesigner>
  </div>
</template>
<script lang="ts" setup>
import { EDesigner, type PageSchema } from "@epic-designer/core";
import { ref, onMounted, nextTick } from "vue";
const designerRef = ref<InstanceType<typeof EDesigner>>();

console.log(designerRef, "ref-");

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      label: "页面",
      children: [
        {
          label: "表单",
          type: "form",
          icon: "epic-icon-daibanshixiang",
          componentProps: {
            layout: "horizontal",
            name: "default",
            labelWidth: 100,
            labelLayout: "fixed",
            labelCol: {
              span: 5,
            },
            wrapperCol: {
              span: 19,
            },
            hideRequiredMark: false,
            colon: true,
            labelAlign: "right",
            size: "middle",
          },
          children: [
            {
              label: "栅格布局",
              type: "row",
              icon: "epic-icon-zhage",
              children: [
                {
                  type: "col",
                  children: [
                    {
                      label: "姓名",
                      type: "input",
                      field: "input_2drzm924",
                      icon: "epic-icon-write",
                      input: true,
                      componentProps: {
                        bordered: true,
                        placeholder: "请输入",
                      },
                      id: "input_2drzm924",
                    },
                  ],
                  componentProps: {
                    span: 12,
                  },
                  id: "col_m17ttkgz",
                },
                {
                  type: "col",
                  children: [
                    {
                      label: "年龄",
                      type: "number",
                      icon: "epic-icon-number",
                      field: "number_x4t431jb",
                      input: true,
                      componentProps: {
                        style: {
                          width: "100%",
                        },
                        placeholder: "请输入",
                      },
                      id: "number_x4t431jb",
                    },
                  ],
                  componentProps: {
                    span: 12,
                  },
                  id: "col_6uvxdrme",
                },
              ],
              id: "row_fpuoo21a",
            },
            {
              label: "性别",
              type: "radio",
              icon: "epic-icon-danxuan-cuxiantiao",
              field: "radio_sex",
              input: true,
              componentProps: {
                options: [
                  {
                    label: "男",
                    value: "男",
                  },
                  {
                    label: "女",
                    value: "女",
                  },
                ],
                optionType: "default",
                defaultValue: "男",
              },
              id: "radio_shndnr9b",
            },
            {
              label: "兴趣",
              type: "checkbox",
              icon: "epic-icon-duoxuan1",
              field: "checkbox_1l91io8k",
              input: true,
              componentProps: {
                options: [
                  {
                    label: "唱",
                    value: "唱",
                  },
                  {
                    label: "跳",
                    value: "跳",
                  },
                  {
                    label: "rap",
                    value: "rap",
                  },
                  {
                    label: "篮球",
                    value: "篮球",
                  },
                ],
              },
              id: "checkbox_1l91io8k",
            },
            {
              label: "个人简介",
              type: "textarea",
              field: "textarea_1ihmowjl",
              icon: "epic-icon-edit",
              input: true,
              componentProps: {
                placeholder: "请输入",
                autoSize: {
                  minRows: 4,
                },
              },
              id: "textarea_1ihmowjl",
            },
          ],
          id: "form_eifo73no",
        },
      ],
      componentProps: {
        style: {
          padding: "16px",
        },
      },
    },
  ],
  script:
    "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test')\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test \n})",
};

onMounted(() => {
  nextTick(() => {
    ceshi(0);
    console.log(designerRef.value.getData, "designerRef.value");
    designerRef.value?.setData(pageSchema);
  });
});

/**
 * 点击保存按钮操作
 * @param e
 */
function handleSubmit(e: PageSchema) {
  ceshi(1);
  console.log(e);
}
/**
 * 测试获取数据的函数
 **/
const ceshi = (num) => {
  let data = "";

  // let data = designerRef.value.getData()
  let obj = [
    {
      id: "root",
      info: "页面",
      isKey: true,
      isNull: true,
      length: 101,
      name: "root",
      type: "int",
    },
    {
      id: "radio_shndnr9b",
      info: "性别",
      isKey: true,
      isNull: true,
      length: 10,
      name: "radioSex",
      type: "int",
    },
  ];
  let str = JSON.stringify(obj);
  if (num) {
    data = designerRef.value.getDataSource();
  } else {
    data = designerRef.value.setDataSource(str);
  }
  console.log(data, "测试获取数据--------------");
};
</script>
